<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/animate.css"/>
    <style>
        div{
            width: 500px;
            height: 300px;
            background-color: gainsboro;
        }
        span{
            display: block;
            width: 80px;
            height: 50px;
            margin:10px 30px;
            background-color: antiquewhite;
            float: left;
        }
    </style>
</head>
<body>
<p>北京市</p>
<div>
    <span id="bj">北京</span>
    <span id="sh">上海</span>
    <span id="tj">天津</span>
    <span>石家庄</span>
    <span>广州</span>
</div>
<script>
    var myP= document.getElementsByTagName("p")[0];
    document.getElementsByTagName("div")[0].onclick=function(e){
        var e=e||window.event;//考虑到浏览器的兼容问题
//          console.log(e.target);//查看点击事件的执行目标元素
        var myTarget= e.target;
        if(myTarget.nodeName=="SPAN"){
            console.log(myTarget.id);//获取元素的属性值
            switch (myTarget.id){
                case "bj":
                        alert("北京欢迎您！");
                    break;
                case  "sh":
                       myTarget.className="animated rotateOutDownLeft";
                    break;
                case  "tj":
                        alert("天津狗不理包子不好吃");
                    break;
                default :
                    break;
            }



        }
    };
</script>
</body>
</html>